<template>
	<view class="innerContain">
      <view class="top-content"></view>
      <view class=topradio>
		<view class="top">
			<card :data="data" :cartcount='cartcount' />
		</view>
		<!-- <view class="gap">

		</view> -->
		  <view class="childborder" style="">
      <uni-list class="list" style="background-color:transparent">
        <uni-list-item
          showArrow="true"
          :title="List[0].item"
          clickable
          @click="clickFirst"
          style="background-color:transparent;padding:0rpx 0rpx 24rpx 0rpx;margin-top:-4rpx "

        >
          <template slot="body">
            <view class="list-icon red">
              <view class="list-icon-title">
                            <text style="font-weight: 500;font-size:33rpx">{{ List[0].item }}</text>

              </view>
              <view class="list-icon-icon trueorfalse">
                <!-- <icon
                  v-show="List[0].status"
                  type="success_no_circle"
                  size="14"
                />
                <image
                  v-show="List[0].warn"
                  src="../../static/jinggao.png"
                /> -->
                  <image
                  v-show="List[0].status"
                  style="width:45rpx:height:45rpx"
                  src="../../static/true.png"
                /> 
                <image
                  v-show="List[0].warn"
                  src="../../static/false.png"
                />
              </view>
            </view> </template
        ></uni-list-item>
        <uni-list-item
        class="red1"
          showArrow="true"
          :title="List[1].item"
          clickable
          @click="clickSecond"
          ><template slot="body">
            <view class="list-icon">
              <view class="list-icon-title">
                                         <text style="font-weight: 500;font-size:33rpx">{{ List[1].item }}</text>

              </view>
              <view class="list-icon-icon trueorfalse">
                  <image
                  v-show="List[1].status"
                  style="width:45rpx:height:45rpx"
                  src="../../static/true.png"
                /> 
                <image
                  v-show="List[1].warn"
                  src="../../static/false.png"
                />
              </view>
            </view> </template
        ></uni-list-item>
        <uni-list-item
         style="padding:20rpx 0rpx 0rpx 0rpx"

          showArrow="true"
          :title="List[2].item"
          clickable
          @click="clickThird"
          ><template slot="body">
            <view class="list-icon">
              <view class="list-icon-title">
                                         <text style="font-weight: 500;font-size:33rpx">{{ List[2].item }}</text>

              </view>
              <view class="list-icon-icon trueorfalse">
               <image
                  v-show="List[2].status"
                  style="width:45rpx:height:45rpx"
                  src="../../static/true.png"
                /> 
                <image
                  v-show="List[2].warn"
                  src="../../static/false.png"
                />
              </view>
            </view> </template
        ></uni-list-item>
      </uni-list>
    </view>

 </view>
	</view>
</template>

<script>
import card from "@/components/innerCard/innerCard.vue";
import {
  pointCheckDeviceDetail,
  pointCheckTaskDeviceAdd,
  pointCheckTaskDeviceEdit,
  pointCheckTaskDeviceRemove
} from "@/api/index.js";
export default {
  components: {
    card
  },
  	 onLoad(val) {
    this.Tdata = val.taskId;
    this.cartcount = getApp().globalData.uname
     
  },
	onShow() {
     this.List.forEach(item => {
      item.warn = false;
      item.status = false;
    });
    pointCheckDeviceDetail(this.Tdata).then(res => {
      this.dataList = res.data["承力承压件"].pointCheckDeviceDetails;
      this.dataList.forEach(item1 => {
        this.List.forEach(item2 => {
          if (item2.item == item1.item) {
            item2.data = true;
            if (item1.status == "正常") {
              item2.status = true;
            } else if (item1.status == "异常") {
              item2.warn = true;
            }
          } else {
          }
        });
      });
    });
  },
  data() {
    return {
      List: [
        { item: "焊缝", status: false, warn: false, data: false },
        { item: "大变形", status: false, warn: false, data: false },
        { item: "其他", status: false, warn: false, data: false }
      ],
			dataList: [],
      data: {
        name: "承力承压件",
        time: "2021-8-19 12:02",
        number: "01",
        position: "北京",
        normal: "2",
        error: "2",
        num: "1",
        isCheck: true,
        people: "王五"
      }
    };
  },
  methods: {
		// 焊缝
    clickFirst() {
      uni.navigateTo({
        url: "../pressureChange/pressureChange?Tdata=" +
          this.Tdata
      });
    },
		// 大变形
    clickSecond() {
      uni.navigateTo({
        url: "../pressureChange/second?Tdata=" +
          this.Tdata
      });
    },
		// 其他
    clickThird() {
      uni.navigateTo({
        url: "../pressureChange/third?Tdata=" +
          this.Tdata
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.innerContain {
  height: 100%;
  position: relative;
  background-color: white;
}
.top-content {
  height: 160rpx;
  background: linear-gradient(to left, #1040be, #026dff);
}
.topradio {
  height: calc(100% - 200rpx);
   overflow-y: auto;
  position: absolute;
  background-color: white;
  // padding: 30rpx;
  width: 100%;
  top: 50rpx;
  border-radius: 40rpx 40rpx 0 0;
  // position: absolute;
  // width: 100%;
  // top: 0rpx;
  // left: 0rpx;
  // background-color: white;
  // border-radius: 40rpx 40rpx 0 0;
}
.top {
  padding: 16rpx;
  /* box-shadow: 20px -77px 0px 19px #c6c6ca; */
  box-shadow: 4rpx 4rpx 20rpx #e5e1e1;
  margin: 24rpx;
  border-radius: 32rpx;
}
.childborder {
  padding: 34rpx;
  margin: 24rpx;

  box-shadow: 0px 6px 33px #e5e1e1;
  border-radius: 32rpx;
}
.trueorfalse {
  margin-right: 20rpx;
  top: 6rpx;
}
.red1 {
  padding: 25rpx 0rpx;
}
</style>